<template>
  <div class="searchArea">
    <h1>教师用户信息列表</h1>
    <el-form :inline="true" class="teacherform" label-width="80px">
      <el-form-item label="工号">
        <el-input
          placeholder="请输入工号"
          size="small"
          v-model="searchInfo.teacherId"
        ></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input
          placeholder="请输入姓名"
          size="small"
          v-model="searchInfo.name"
        ></el-input>
      </el-form-item>
    </el-form>
    <el-form :inline="true" class="teacherform" label-width="80px">
      <el-form-item label="所属院系">
        <el-select
          v-model="searchInfo.departmentId"
          placeholder="请选择院系"
          size="small"
        >
          <el-option
            v-for="item in departmentList"
            :key="item.departmentId"
            :label="item.departmentName"
            :value="item.departmentId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="职称">
        <el-select
          v-model="searchInfo.academicTitle"
          placeholder="请选择职称"
          size="small"
        >
          <el-option
            v-for="(item, index) in academicTitles"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          size="small"
          @click="searchSubmit"
          style="margin-left:20px;
                  background-color: rgb(51, 55, 68);
                  color: white;
                  border: 0;"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      academicTitles: [],
      //院系列表
      departmentList: [],

      // 查询教师信息
      searchInfo: {
        teacherId: null,
        name: null,
        departmentId: null,
        academicTitle: null,
      },
    };
  },
  methods: {
    // 点击“查询”按钮
    searchSubmit() {
      this.checkSearchInfo();
      this.$http
        .post(this.$api.TeacherSearchInfo, this.searchInfo)
        .then((resp) => {
          if (resp.success) {
            // 搜索组件传递参数
            this.$emit("searchSubmit", resp.data);
          } else {
            this.$handleFailResp(this, resp);
          }
        });
    },
    //检查参数
    checkSearchInfo() {
      this.searchInfo.teacherId = "" ? null : this.searchInfo.teacherId;
      this.searchInfo.name = "" ? null : this.searchInfo.name;
      this.searchInfo.departmentId = "" ? null : this.searchInfo.departmentId;
      this.searchInfo.academicTitle = "" ? null : this.searchInfo.academicTitle;
    },
    // 返回职称
    returnacademicTitles() {
      this.$http.get(this.$api.InfoAcademicTitle).then((resp) => {
        if (resp.success) {
          this.academicTitles = resp.data.academicTitles;
        } else {
          this.$handleFailResp(this, resp);
        }
      });
    },
    //返回院系列表
    returnDepartment() {
      this.$http.get(this.$api.InfoDepartment).then((resp) => {
        if (resp.success) {
          this.departmentList = resp.data;
        } else {
          this.$handleFailResp(this, resp);
        }
      });
    },
  },
  mounted() {
    this.returnDepartment();
    this.returnacademicTitles();
  },
};
</script>

<style scoped>
.el-input {
  width: 220px;
}
.el-select {
  width: 220px;
}
.teacherform {
  height: 50px;
  width: 800px;
  margin: auto;
  text-align: left;
  padding-left: 70px;
}

.searchArea {
  text-align: center;
}
</style>
